<div class="intro">
	<div class="top">
        <div class="top-left">&nbsp;</div>
        <div class="top-middle">&nbsp;</div>
        <div class="top-right">&nbsp;</div>
    </div>
	<div id="PRODUCTS_CONTENT" class="content">
czikiczikiczikita
	</div>        
	<div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-middle"></div>
        <div class="bottom-right"></div>
    </div>
</div>

<script type="text/javascript" language="javascript">
var mycarousel_itemList = [];
</script>

<div class="product-banners">

	<div class="top">
        <div class="top-left">&nbsp;</div>
        <div class="top-middle">&nbsp;</div>
        <div class="top-right">&nbsp;</div>
    </div>
<div class="content">       




<?php 
$banners = getBanners($MAINBANERY_XML, $lang);
?>
<ul id="mycarousel" class="jcarousel-skin-bera">
<?php 
$i = 0 ;
    foreach($banners as $baner) {
?>
<script type="text/javascript" language="javascript">    	
    mycarousel_itemList[<?php echo $i++;?>] = {url: '<?php echo $baner->foto; ?>', title: '<?php echo $nazwa; ?>', href: '<?php echo $baner->url; ?>'};
</script>
<?php     
    }
?>
</ul>
</div>
<div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-middle"></div>
        <div class="bottom-right"></div>
    </div>
</div>

<script type="text/javascript" language="javascript">
//new Slideshow('.product-banners');
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 5.5,
        wrap: 'circular',
        initCallback: mycarousel_initCallback,
        vertical: true,
        scroll: 1,
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
        buttonNextHTML: '',
        buttonPrevHTML: '',
        buttonNextEvent: '',
        buttonPrevEvent: '',
        buttonNextCallback: null,
        buttonPrevCallback: null
    });
});

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" style="" alt="' + item.title + '" />';
};



</script>
